<script setup>

import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";

const time = ref(3)
const router = useRouter()

const jump = () => {
    setInterval(() => {
        time.value--;
        if(time.value === 0) {
            router.replace('/')
        }
    }, 1000)
}

onMounted(() => jump())

</script>

<template>
    <div class="success wrapper">
        <p class="cong"><el-icon style="margin-right: 5px;"><SuccessFilled /></el-icon>恭喜你，订单提交成功</p>
        <p>将在{{time}}秒后返回主页</p>
        <p><a @click="$router.replace('/')">未跳转？点击此处返回首页</a></p>
    </div>
</template>

<style scoped lang="scss">
.success {
    margin: 100px auto;

    p {
        text-align: center;
        font-size: 18px;
    }

    .cong {
        font-size: 24px;
        color: $mainColor;
    }

    a {
        font-size: 12px;
        color: #b8b8b8;
        cursor: pointer;
    }
}

</style>